From idea to website, this is how I started, progressed and ended the journey to create my personal website.

Here I’ll show how I picked the layout and design, how I took care of SEO and analytics and the overall architecture of the website.

Design and Layout

This website was started from the TRETO theme from Envato Market and it was carefully selected for its functionality, color palette, and typography.

I was looking for a theme that was both creative and informative. Somewhat loaded with photos but also content where I can express myself and also be ranked in search engines.

TRETO was the solution for this; it starts with some photos and little text and, while the user scrolls the content starts increasing and engaging the user to get to know my skills, education, experience and testimonials.

SEO

SEO is really important for me and one of the points I always try to sell to my customers. Because of it I wanted to make sure my entry point and place on the web were able to reflect exactly that.

From the way the content is structured to the URL, everything is done with SEO in mind. Not only to rank the website better but mainly because I want to showcase what I can do to my customers.

Speed and performance

Again, with SEO in mind, speed and performance are the biggest ranking factors in web development.

But, more than that, it provides a good experience to the user that is viewing the website.

This website covers a lot of factors that a lot of websites don’t bother with, such as:

• Above the fold content: The necessary CSS to load the content that is presented to the user is set inline, while all the other CSS is not loaded until the user is already viewing the website.
• Lazy loading images: This is pretty straightforward with WordPress but I’ve assured that all the images are loaded async so the website loads faster.
• Size of images: By using plugins such as ShortPixel, we are able to provide the images in the next-gen formats and compressed to a minimum.
• Very low JS footprint: Everything that is not required is loaded async.
• Low use of plugins: Plugins can increase the processing time of a website by a lot. It’s important to reduce the use of these plugins to a maximum or only use plugins that a PHP professional knows to be lightweight.

Architecture

Before starting out on a project it is important to have a vision of what’s going to be built. For this, it is important to have a proper architecture design:

• For the information the website is going to contain
• For the plugins that are going to accomplish the functionality the website needs
• If the plugin is complex (for instance, an API) it should have an architecture of its own as well

Here is the architecture diagram I started with for hugosilva.me.

As we can see, I try to define all the content types, taxonomies, and options the website is going to have (information architecture). As well as the required plugins for the website to work.

Just a small note: “Hugo’s WP Bootstrap” is a custom-made plugin I use on every website that removes some extra code WordPress adds and sets up Google Tag Manager.

Again, with SEO in mind, speed and performance are the biggest ranking factors in web development.

But, more than that, it provides a good experience to the user that is viewing the website.

This website covers a lot of factors that a lot of websites don’t bother with, such as:

• Above the fold content: The necessary CSS to load the content that is presented to the user is set inline, while all the other CSS is not loaded until the user is already viewing the website.
• Lazy loading images: This is pretty straightforward with WordPress but I’ve assured that all the images are loaded async so the website loads faster.
• Size of images: By using plugins such as ShortPixel, we are able to provide the images in the next-gen formats and compressed to a minimum.
• Very low JS footprint: Everything that is not required is loaded async.
• Low use of plugins: Plugins can increase the processing time of a website by a lot. It’s important to reduce the use of these plugins to a maximum or only use plugins that a PHP professional knows to be lightweight.

Accessibility

Website accessibility ensures everyone, regardless of ability, can perceive, understand, navigate and interact with your website. But it’s more than that; having an accessible website shows the world that your brand cares and makes an effort to include everyone.

Accessibility can potentially boost SEO especially when we take the time to review the headers placement or images alt text.

Analytics

It’s important to have a feedback loop. See where people most interact on your website and what’s working or not.

Analytics provides this information. A well-developed website and a well-cared-for website not only set up analytics but also create events that allow a better understanding of how the end user is navigating and interacting with the website.

Security

WordPress is the most used CMS in the world and open source. Because of it hackers look for vulnerabilities that can be exploited on multiple websites and with it introduce malicious code onto external platforms.

Because of it it is not only important to have a good understanding of development practices but also server configurations and the common pitfalls of WordPress.